<template>
    <div id="user">
       <!--新增按钮-->
       <div class="xinbutton">
        <el-button type="primary" @click="showDialog">+ 新增</el-button>
       </div>
       <!--table表格-->
       <el-table :data="tableData">
      <el-table-column prop="name" label="姓名" ></el-table-column>
      <el-table-column prop="age" label="年龄" ></el-table-column>
      <el-table-column prop="sex" label="性别" >
        <template v-slot="scope">
         {{  scope.row.sex  ===  0 ? '男' : '女'  }}
        </template>
      </el-table-column>
      <el-table-column prop="birth" label="出生日期" ></el-table-column>
      <el-table-column prop="addr" label="地址" ></el-table-column>
      <el-table-column label="操作" >
  <template v-slot="scope">
  <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
  <el-button size="mini" type="danger" @click="deleteUser(scope.row.id)">删除</el-button>
    </template>
      </el-table-column>
      </el-table>
       <!--新增对话框-->
       <el-dialog
  title="新增用户"
  :visible.sync="addVisible"
  width="50%"
  @close="addclose">
  <el-form :model="addruleForm" :rules="addrules" ref="ruleForm" label-width="100px" :inline="true">
  <el-form-item label="姓名" prop="name">
    <el-input  v-model="addruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input  v-model="addruleForm.age"></el-input>
  </el-form-item>
  <el-form-item label="性别" >
    <el-select v-model="addruleForm.sex" placeholder="请选择">
    <el-option
      label="男"
      value="0">
    </el-option>
    <el-option
      label="女"
      value="1">
    </el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="出生日期" >
    <el-input type="date" v-model="addruleForm.birth"></el-input>
  </el-form-item>
  <el-form-item label="地址" prop="addr">
    <el-input  v-model="addruleForm.addr"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addVisible = false">取 消</el-button>
    <el-button type="primary" @click="adduser()">确 定</el-button>
  </span>
</el-dialog>
<!--编辑对话框-->
<el-dialog
  title="编辑用户"
  :visible.sync="editVisible"
  width="50%"
  @close="addclose">
  <el-form :model="addruleForm1" :rules="addrules" ref="ruleForm" label-width="100px" :inline="true">
  <el-form-item label="姓名" prop="name">
    <el-input  v-model="addruleForm1.name"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input  v-model="addruleForm1.age"></el-input>
  </el-form-item>
  <el-form-item label="性别" >
    <el-select v-model="addruleForm1.sex" placeholder="请选择">
    <el-option
      label="男"
      :value="0">
    </el-option>
    <el-option
      label="女"
      :value="1">
    </el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="出生日期" >
    <el-input type="date" v-model="addruleForm1.birth"></el-input>
  </el-form-item>
  <el-form-item label="地址" prop="addr">
    <el-input  v-model="addruleForm1.addr"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="editVisible = false">取 消</el-button>
    <el-button type="primary" @click="edituser()">确 定</el-button>
  </span>
</el-dialog>
    </div>
    </template>

<script>
import { async } from 'rxjs'

export default {
    data() {
        return {
            //对话框的显示与隐藏
            addVisible: false,
            editVisible: false,
            //新增数据
            addruleForm: {
                name: '',
                age: '',
                sex: '',
                birth: '',
                addr: ''

            },
            //验证
            addrules: {
                name: [{ required: true, message: "请填写用户名", trigger: 'blur' }],
                age: [{ required: true, message: "请填写年龄", trigger: 'blur' }],
                addr: [{ required: true, message: "请填写地址", trigger: 'blur' }]
            },
            //table表格数据
            tableData: [],
            //编辑数据
            addruleForm1:{}
        }
    },
    created() {
        this.getTaDate()
    },
    methods: {
        //点击新增
        showDialog() {
            this.addVisible = true
        },
        //关闭对话框
        addclose() {
            this.$refs.ruleForm.resetFields()
        },
        //点击确定，新增用户
        adduser() {
            this.$refs.ruleForm.validate(async (bool) => {
                if (!bool) return
                let {data}=await this.$http.post("/user/add",this.addruleForm)
       this.getTaDate()
       this.addVisible=false
            })
        },
        //获取数据
        async getTaDate() {
            let { data } = await this.$http.get("/user/getUser")
            // console.log(data)
            this.tableData = data.list
        },
        //点击删除
       async deleteUser(id){

       let h=await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
        if(h==='confirm'){
             let {data}=await this.$http.post("/user/del",{id : id})
             this.getTaDate()
        }
           
        },
        //点击编辑
        edit(row){
           this.addruleForm1=row
           this.editVisible=true
        },
        //点击确定，进行编辑
       async edituser(){
        this.$refs.ruleForm.validate(async(bool)=>{
            if(!bool) return 
            let {data}=await this.$http.post("/user/edit",this.addruleForm1)
       this.getTaDate()
       this.editVisible=false
                })
        }
    }
}
</script>

<style lang="less" scoped>
.el-table {
    margin-top: 15px;
}
</style>